<!-- Dom模板 -->
<template>
  <div class="headerBox">
    <!-- Dom内容 -->
    <div>
      <h4>{{ title }}</h4>
    </div>
    <div class="headerNav">
      <!-- 下拉选择 -->
      <div v-if="show" style="height: 40px">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="订单状态">
            <el-select
              style="width: 200px"
              v-model="formInline.region"
              placeholder="请选择"
              @change="select"
            >
              <el-option label="已支付" value="已支付"></el-option>
              <el-option label="未支付" value="未支付"></el-option>
              <el-option label="已退款" value="已退款"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 日期选择 -->
      <div v-if="timeShow" class="block">
        <span style="padding-right: 10px">{{ time }}</span>
        <el-date-picker
          style="width: 300px"
          value-format="yyyy-MM-dd"
          v-model="submitTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="chooseTime"
        >
        </el-date-picker>
      </div>
      <!-- 搜索框 -->
      <div>
        <span v-if="flag" style="padding-right: 10px">{{ name }}</span>
        <el-input
          style="width: 200px; font-size: 12px"
          v-model="input"
          placeholder="请输入订单号、用户账号、昵称"
        ></el-input>
      </div>
      <!-- 确认按钮 -->
      <div>
        <el-button
          style="background: #38a28a; width: 80px"
          type="success"
          @click="toParent"
          >{{ buttonTitle }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Header from "../header/index.vue";
export default {
  props: [
    "show", //是否显示订单状态 true显示 false隐藏
    "flag", //是否显示搜索框   true显示 false隐藏
    "title", //大标题
    "time", //提交时间
    "buttonTitle", //button按钮标题
    "submitBut", //字传父事件
    "name", //搜索框前面的标题
    "timeShow", //时间前面的标题
  ],
  name: "",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      submitTime: "",
      butTime: [],
      input: "",
      needVal: {},
    };
  },
  components: { Header },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // 子传父
    toParent() {
      this.needVal.orderState = this.formInline.region; //获取下拉框订单状态的值
      // 将时间改为现在的时间
      if (this.submitTime) {
        this.submitTime.forEach((item) => {
          item = new Date(item);
          this.butTime.push(item);
        });
      }
      this.needVal.subTime = this.butTime; //获取提交时间的值
      this.needVal.search = this.input; //获取搜索输入框的值
      this.$emit("submitBut", this.needVal); //子传父 给父级传过去
    },
    // 下拉框选择
    select() {
      this.$emit("selectValue", this.formInline.region);
    },
    // 选择时间
    chooseTime() {
      let arr = [];
      if (this.submitTime) {
        this.submitTime.map((item) => {
          arr.push(new Date(item));
        });
        this.$emit("chooseTime", arr);
      }
    },
  },
};
</script>

<style lang="less" scoped>
/* @import url(''); 引入css类 */
.headerBox {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  > div {
    padding: 10px 10px;
  }
  .headerNav {
    display: flex;
    justify-content: space-around;
  }
}
</style>